<template>
  <div class="carousel-container">
    <van-swipe
      class="carousel"
      :autoplay="autoplay"
      :loop="loop"
      :show-indicators="showIndicators"
      :duration="duration"
      :initial-swipe="initialSwipe"
      :height="height"
      :width="width"
      :touchable="touchable"
      :stop-propagation="stopPropagation"
      @change="onChange"
    >
      <van-swipe-item v-for="(item, index) in items" :key="index" @click="onItemClick(item)">
        <div class="carousel-item">
          <img :src="item.image" :alt="item.title" class="carousel-image" />
          <div v-if="showTitle" class="carousel-title">{{ item.title }}</div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  },
  autoplay: {
    type: Number,
    default: 3000
  },
  loop: {
    type: Boolean,
    default: true
  },
  showIndicators: {
    type: Boolean,
    default: true
  },
  duration: {
    type: Number,
    default: 500
  },
  initialSwipe: {
    type: Number,
    default: 0
  },
  height: {
    type: [Number, String],
    default: '160px'
  },
  width: {
    type: [Number, String],
    default: '100%'
  },
  touchable: {
    type: Boolean,
    default: true
  },
  stopPropagation: {
    type: Boolean,
    default: true
  },
  showTitle: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['change', 'item-click'])

const onChange = (index) => {
  emit('change', index)
}

const onItemClick = (item) => {
  emit('item-click', item)
}
</script>

<style lang="scss" scoped>
.carousel-container {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  
  .carousel {
    width: 100%;
    
    .carousel-item {
      position: relative;
      width: 100%;
      height: 100%;
      
      .carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .carousel-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px 12px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
        color: #fff;
        font-size: 14px;
        line-height: 1.4;
      }
    }
  }
  
  :deep(.van-swipe__indicator) {
    background-color: rgba(255, 255, 255, 0.6);
  }
  
  :deep(.van-swipe__indicator--active) {
    background-color: var(--primary-color);
  }
}
</style> 